<template>
	<view class="page">
		<view class="section">
			<view class="tc flex">
				<uni-icons type="left" class="flex-1 tr padding-right-default" @click="toBack"></uni-icons>
				<picker mode="multiSelector" :value="outIndex" :range="checkoutList" @change="pickerChange"
					@columnchange="columnchange">
					<view>
						{{start}}--{{end}}
					</view>
				</picker>
				<uni-icons type="right" class="flex-1 tl padding-left-default" @click="toNext"></uni-icons>
			</view>
		</view>
		<!-- <view class="section" v-if="isBalance">
			<view class="home-title">
				<text class="home-title-left cr-base">{{balance.subjectCode}}&nbsp;{{balance.subjectName}}</text>
			</view>
			<view style="color: #cccccc;" class="text-size-xs">
				<view class="home-title padding-sm">
					<view>
						期初余额
						 <span v-if="model.content.beginBalanceFor === 0"
							class="flat circle margin-left-xl padding-right-xs padding-left-xs">平</span>
						<span v-else-if="model.content.beginBalanceFor > 0"
							class="total-credit circle margin-left-xl padding-right-xs padding-left-xs">贷</span>
						<span v-else-if="model.content.beginBalanceFor < 0"
							class="debit circle margin-left-xl padding-right-xs padding-left-xs">借</span>
					</view>
					<view>{{numFilter(balance.beginBalance)}}</view>
				</view>
				<view class="home-title padding-sm">
					<view>
						期末余额
						<span v-if="model.content.endBalanceFor === 0"
							class="flat circle margin-left-xl padding-right-xs padding-left-xs">平</span>
						<span v-else-if="model.content.endBalanceFor > 0"
							class="total-credit circle margin-left-xl padding-right-xs padding-left-xs">贷</span>
						<span v-else-if="model.content.endBalanceFor < 0"
							class="debit circle margin-left-xl padding-right-xs padding-left-xs">借</span> 
					</view>
					<view>{{numFilter(balance.endBalance)}}</view>
				</view>
			</view>
		</view> -->
		<!-- 详情-->
		<view class="section">
			<balance-detail-page :deatilList="deatilList"></balance-detail-page>
		</view>
	</view>
</template>

<script>
	import accountBook from '../../js/api/accountBook'
	
	const app = getApp()
	export default {
		data() {
			return {
				balance: {},
				subjectId: '',
				subjectCode: '',
				deatilList: [],
				isBalance: false,
				checkoutList: [],
				checkList: [],
				outIndex: [],
				start: '',
				end: '',
			}
		},
		onLoad(options) {
			this.subjectId = options.subjectId
			this.subjectCode = options.subjectCode
			if(options.sIndex && options.eIndex){
				this.init([Number(options.sIndex),Number(options.eIndex)])
			}else{
				this.init([0,0])
			}
		},
		watch: {
			outIndex() {
				this.loadData()
			}
		},
		methods: {
			toNext() {
				if (this.outIndex[1] === 0) {
					app.globalData.showToast(this.checkList[0] + '是最新期数');
				} else {
					this.outIndex[1] -= 1
					this.end = this.checkList[this.outIndex[1]]
					this.loadData()
				}
			},
			toBack() {
				if (this.outIndex[0] + 1 === this.checkList.length) {
					app.globalData.showToast('没有数据了');
				} else {
					console.log(this.outIndex)
					this.outIndex[0] += 1
					this.start = this.checkList[this.outIndex[0]]
					console.log(this.start)
					console.log(this.outIndex)
					this.loadData()
				}
			},
			init(indexs) {
				this.checkList = uni.getStorageSync(app.globalData.data.cache_checkout_list)
				this.checkoutList.push(this.checkList)
				this.checkoutList.push(this.checkList)
				this.outIndex = indexs
				this.start = this.checkList[indexs[0]]
				this.end = this.checkList[indexs[1]]
			},
			columnchange(e) {},
			pickerChange(e) {
				const values = e.detail.value
				if (values[0] < values[1]) {
					app.globalData.showToast('开始期间不能大于结束期间～');
					values[1] = values[0]
				}
				this.outIndex = values
				this.start = this.checkList[values[0]]
				this.end = this.checkList[values[1]]
			},
			numFilter(value) {
				if (value) {
					let realVal = parseFloat(value).toFixed(2)
					return realVal
				} else {
					return '-'
				}
			},
			loadData() {
				accountBook.details({
					start: this.start,
					end: this.end,
					subjectId: this.subjectId,
					subjectCode: this.subjectCode,
					showNumPrice: false,
					// currencyId:uni.getStorageSync(app.globalData.data.cache_currency_id),
					// auxiliary:false,
					// levelStart: 1,
					// levelEnd: 4,
				}).then((res) => {
					this.deatilList = res
					console.log(res)
				})
			}
		}
	}
</script>

<style>
	.page {
		background-color: rgba(246, 247, 248, 1);
		position: relative;
		overflow: hidden;
	}

	.section {
		background-color: rgba(255, 255, 255, 1);
		padding: 10rpx 20rpx;
		margin-bottom: 30rpx;
	}

	.home-title {
		display: flex;
		align-items: center;
		justify-content: space-between
	}

	.home-date-title {
		display: flex;
		align-items: left;
		justify-content: left;
	}
</style>